<template>
  <img
    :src="myBulletImg"
    v-for="item of bullets"
    :style="{ top: item.y + 'px', left: item.x + 'px' }"
    :key="item.id"
  />
</template>

<script>
import { watch, ref } from "vue";
import myBulletImg from "../assets/bunny-self.png";
export default {
  name: "Mybullet",
  props: {
    list: Array,
  },
  setup(props) {
    const bullets = ref(props.list);
    watch(props, (newVal) => {
      // console.log(1111111111)
      bullets.value = newVal.list;
      // console.log(bullets.value);
    });
    return { myBulletImg, bullets };
  },
};
</script>

<style lang="stylus" scoped>
img {
  position: absolute;
  width: 20px;
  height: 33px;
}
</style>